JavaScript Nullish Coalescing: Panduan Komprehensif untuk Penetapan Nilai Default

Dalam JavaScript, menetapkan nilai default adalah tugas yang umum. Secara tradisional, para pengembang telah menggunakan operator OR (||) untuk tujuan ini. Namun, operator nullish coalescing (??), yang diperkenalkan dalam ECMAScript 2020, menyediakan cara yang lebih presisi dan andal untuk menangani penetapan nilai default, khususnya saat berurusan dengan nilai null atau undefined. Panduan ini memberikan penjelasan mendalam tentang operator nullish coalescing, menjelajahi sintaksis, perilaku, perbedaannya dari operator OR, dan kasus penggunaan praktisnya.

Apa itu Nullish Coalescing?

Operator nullish coalescing (??) adalah operator logika yang mengembalikan operan sisi kanannya ketika operan sisi kirinya adalah null atau undefined. Jika tidak, ia mengembalikan operan sisi kirinya. Dalam istilah yang lebih sederhana, ia memberikan nilai default hanya ketika sebuah variabel secara tegas bernilai null atau undefined.

Sintaksis

Sintaksis untuk operator nullish coalescing sangat sederhana:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Di sini, leftOperand adalah variabel atau ekspresi yang ingin Anda periksa apakah bernilai null atau undefined, dan rightOperand adalah nilai default yang ingin Anda tetapkan jika leftOperand memang null atau undefined.

Contoh

Perhatikan contoh berikut:

            const username = null ?? "Guest";
console.log(username); // Hasil: Guest

const age = undefined ?? 25;
console.log(age); // Hasil: 25

const city = "London" ?? "Unknown";
console.log(city); // Hasil: London
            

              
                Copy
              
            
          

Dalam contoh ini, username diberi nilai default "Guest" karena awalnya null. Demikian pula, age diberi nilai 25 karena dimulai sebagai undefined. Namun, city mempertahankan nilai aslinya, "London", karena tidak null maupun undefined.

Nilai Nullish vs. Falsy

Sangat penting untuk memahami perbedaan antara nullish dan falsy dalam JavaScript. Nilai nullish adalah null atau undefined. Nilai falsy adalah nilai yang dianggap salah ketika ditemui dalam konteks Boolean. Nilai-nilai falsy meliputi:

• null
• undefined
• 0 (nol)
• NaN (Not a Number)
• '' (string kosong)
• false

Perbedaan utamanya adalah operator nullish coalescing hanya memeriksa null atau undefined, sedangkan operator OR (||) memeriksa nilai falsy apa pun.

Perbedaan Antara ?? dan ||

Operator OR (||) adalah operator OR logika yang mengembalikan operan sisi kanan jika operan sisi kiri bernilai falsy. Meskipun dapat digunakan untuk menetapkan nilai default, hal ini dapat menyebabkan perilaku yang tidak terduga saat berhadapan dengan nilai seperti 0 atau string kosong.

Contoh: Kelemahan dari ||

            const quantity = 0 || 10; // Kita bermaksud memberikan default 10 jika kuantitas tidak ada
console.log(quantity); // Hasil: 10 (Tidak terduga!) karena 0 adalah falsy

const text = '' || 'Default Text'; //Kita bermaksud memberikan teks default jika teks tidak ada
console.log(text); // Hasil: Default Text (Tidak terduga!) karena '' adalah falsy
            

              
                Copy
              
            
          

Pada contoh pertama, kami bermaksud menetapkan kuantitas default 10 hanya jika quantity tidak ada (null atau undefined). Namun, karena 0 adalah nilai falsy, operator OR secara keliru menetapkan nilai default. Demikian pula, string kosong menyebabkan teks default ditampilkan meskipun string tersebut ada (tetapi kosong).

Menggunakan ?? untuk Presisi

Mari kita tulis ulang contoh sebelumnya menggunakan operator nullish coalescing:

            const quantity = 0 ?? 10;
console.log(quantity); // Hasil: 0 (Benar!)

const text = '' ?? 'Default Text';
console.log(text); // Hasil: '' (Benar!)
            

              
                Copy
              
            
          

Sekarang, hasilnya seperti yang diharapkan. Operator nullish coalescing hanya memeriksa null atau undefined, sehingga 0 dan '' diperlakukan sebagai nilai yang valid, dan nilai aslinya dipertahankan.

Kasus Penggunaan untuk Nullish Coalescing

Operator nullish coalescing berguna dalam berbagai skenario di mana Anda perlu memberikan nilai default hanya ketika sebuah variabel secara tegas bernilai null atau undefined. Berikut adalah beberapa kasus penggunaan umum:

1. Menangani Parameter Fungsi Opsional

Saat mendefinisikan fungsi dengan parameter opsional, Anda dapat menggunakan operator nullish coalescing untuk memberikan nilai default jika parameter tidak disediakan.

            function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Hasil: Hello, User!
greet("Alice"); // Hasil: Hello, Alice!
greet("Bob", "Greetings"); // Hasil: Greetings, Bob!
            

              
                Copy
              
            
          

2. Mengatur Opsi Konfigurasi Default

Saat bekerja dengan objek konfigurasi, Anda dapat menggunakan operator nullish coalescing untuk memastikan bahwa nilai default digunakan jika opsi konfigurasi tertentu tidak ditentukan.

            const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Timeout default 10 detik
  const retries = options.retries ?? 5; // Default 5 percobaan ulang
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Hasil: Timeout: 5000, Retries: 3
fetchData({}); // Hasil: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Hasil: Timeout: 10000, Retries: 5
            

              
                Copy
              
            
          

3. Mengakses Properti Objek Bersarang

Saat mengakses properti objek bersarang, operator nullish coalescing dapat digabungkan dengan optional chaining (?.) untuk memberikan nilai default jika ada properti perantara yang null atau undefined.

            const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Hasil: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Hasil: Unknown
            

              
                Copy
              
            
          

4. Bekerja dengan API dan Data Eksternal

Saat mengambil data dari API atau sumber eksternal, operator nullish coalescing dapat digunakan untuk memberikan nilai default jika bidang data tertentu hilang atau memiliki nilai null atau undefined. Pertimbangkan untuk mengambil data pengguna dari berbagai wilayah. Asumsikan beberapa wilayah mungkin tidak menyertakan bidang `country` dalam data pengguna mereka.

            async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`Pengguna dari: ${country}, Zona Waktu: ${timezone}`);
  } catch (error) {
    console.error("Gagal mengambil data pengguna:", error);
  }
}

// Mensimulasikan respons API yang berbeda:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Untuk menguji ini, Anda memerlukan API aktual atau mock fetch.
// Untuk tujuan demonstrasi, mari kita simulasikan responsnya:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Unexpected URL");
};

getUserData(123); // Hasil: Pengguna dari: USA, Zona Waktu: EST
getUserData(456); // Hasil: Pengguna dari: Unknown Country, Zona Waktu: GMT
            

              
                Copy
              
            
          

Precedensi Operator

Operator nullish coalescing memiliki presedensi operator yang relatif rendah. Ini lebih rendah dari operator OR (||) dan AND (&&). Oleh karena itu, ketika menggabungkan operator nullish coalescing dengan operator logika lainnya, penting untuk menggunakan tanda kurung untuk secara eksplisit mendefinisikan urutan operasi. Kegagalan melakukannya dapat mengakibatkan kesalahan sintaksis atau perilaku yang tidak terduga.

Contoh: Menggunakan Tanda Kurung untuk Kejelasan

            // Tanpa tanda kurung (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Token '??' tidak terduga

// Dengan tanda kurung (Benar)
const result = false || (null ?? "Default");
console.log(result); // Hasil: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Hasil: null
            

              
                Copy
              
            
          

Pada contoh pertama, kurangnya tanda kurung menghasilkan SyntaxError karena mesin JavaScript tidak dapat menentukan urutan operasi yang dimaksud. Dengan menambahkan tanda kurung, kita secara eksplisit memberi tahu mesin untuk mengevaluasi operator nullish coalescing terlebih dahulu. Contoh kedua valid; namun, hasilnya berbeda karena ekspresi `||` dievaluasi terlebih dahulu.

Kompatibilitas Browser

Operator nullish coalescing (??) adalah fitur yang relatif baru, jadi sangat penting untuk mempertimbangkan kompatibilitas browser, terutama jika Anda menargetkan browser yang lebih lama. Sebagian besar browser modern mendukung operator nullish coalescing, termasuk:

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+
• Node.js 14+

Jika Anda perlu mendukung browser yang lebih lama, Anda dapat menggunakan transpiler seperti Babel untuk mengonversi kode Anda ke versi JavaScript yang kompatibel. Babel akan mengubah operator ?? menjadi kode JavaScript yang setara yang berfungsi di lingkungan yang lebih lama.

Praktik Terbaik

Berikut adalah beberapa praktik terbaik untuk menggunakan operator nullish coalescing secara efektif:

• Gunakan ?? untuk pemeriksaan nullish: Gunakan operator nullish coalescing (??) ketika Anda secara spesifik ingin memberikan nilai default hanya ketika sebuah variabel bernilai null atau undefined.
• Gunakan tanda kurung untuk ekspresi kompleks: Saat menggabungkan operator nullish coalescing dengan operator logika lainnya, gunakan tanda kurung untuk mendefinisikan urutan operasi dengan jelas.
• Pertimbangkan kompatibilitas browser: Periksa kompatibilitas browser dan gunakan transpiler jika perlu untuk mendukung browser yang lebih lama.
• Gunakan secara konsisten: Terapkan ?? di mana pun yang sesuai untuk gaya pengkodean yang lebih dapat diprediksi di seluruh proyek.
• Gabungkan dengan optional chaining: Gunakan ?? bersamaan dengan optional chaining ?. untuk mengakses dan menetapkan nilai default ke properti objek bersarang dengan aman.

Pertimbangan Global

Saat mengembangkan untuk audiens global, pertimbangkan poin-poin berikut terkait penetapan nilai default:

• Lokalisasi: Nilai default mungkin perlu dilokalkan berdasarkan bahasa atau wilayah pengguna. Misalnya, simbol mata uang atau format tanggal default.
• Norma Budaya: Nilai default tertentu mungkin perlu disesuaikan berdasarkan norma budaya. Misalnya, pesan sapaan default mungkin perlu berbeda di budaya yang berbeda.
• Aksesibilitas: Pastikan bahwa nilai default dapat diakses dan dipahami oleh pengguna dengan disabilitas. Sediakan label yang jelas dan deskriptif untuk nilai default di antarmuka pengguna.
• Zona Waktu dan Tanggal: Saat bekerja dengan tanggal dan waktu, gunakan zona waktu dan format tanggal yang sesuai untuk memastikan bahwa nilai default ditampilkan dengan benar kepada pengguna di berbagai wilayah.

Contoh: Lokalisasi dengan Nullish Coalescing

Katakanlah Anda ingin menampilkan pesan selamat datang default dalam berbagai bahasa berdasarkan lokal pengguna. Anda dapat menggunakan operator nullish coalescing untuk memberikan pesan default jika pesan yang dilokalkan tidak tersedia.

            function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // Gunakan Bahasa Inggris sebagai default jika lokal tidak ditemukan
  return message;
}

console.log(getWelcomeMessage("fr")); // Hasil: Bienvenue !
console.log(getWelcomeMessage("es")); // Hasil: Welcome! (Menggunakan default Bahasa Inggris)
            

              
                Copy
              
            
          

Kesimpulan

Operator nullish coalescing (??) adalah tambahan yang berharga untuk bahasa JavaScript. Ini menyediakan cara yang lebih presisi dan andal untuk menetapkan nilai default dibandingkan dengan operator OR (||), terutama saat berhadapan dengan nilai seperti 0 atau string kosong. Dengan memahami sintaksis, perilaku, dan kasus penggunaannya, Anda dapat menulis kode yang lebih bersih, lebih mudah dipelihara yang secara akurat menangani penetapan nilai default. Ingatlah untuk mempertimbangkan kompatibilitas browser, presedensi operator, dan pertimbangan global saat menggunakan operator nullish coalescing dalam proyek Anda.

Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat secara efektif memanfaatkan operator nullish coalescing untuk meningkatkan kualitas dan keandalan kode JavaScript Anda, menjadikannya lebih kuat dan lebih mudah dipahami. Ingatlah untuk selalu memprioritaskan kejelasan dan kemudahan pemeliharaan dalam kode Anda, dan operator nullish coalescing dapat menjadi alat yang ampuh dalam mencapai tujuan-tujuan ini.